<template>
  <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
    <a-form-item label="编号：" name="username" :rules="[{ required: false, message: 'Please input your username!' }]">
      <a-input v-model:value="formState.userId" disabled />
    </a-form-item>

    <a-form-item label="姓名：" name="username" :rules="[{ required: false, message: 'Please input your password!' }]">
      <a-input v-model:value="formState.userName" disabled />
    </a-form-item>
    <a-form-item label="类型" name="type">
      <a-select v-model:value="formState.type" placeholder="please select your zone">
        <a-select-option value="0">事假</a-select-option>
        <a-select-option value="1">产假</a-select-option>
        <a-select-option value="2">病假</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="Activity time" required name="date1">
      <!-- <a-date-picker v-model:value="date" show-time type="date" placeholder="Pick a date" style="width: 100%" /> -->
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <SpaceBetween>
        <div>
          <a-button type="primary" html-type="submit">提交</a-button>
        </div>
        <div>
          <a-button html-type="submit">取消</a-button>
        </div>
      </SpaceBetween>
    </a-form-item>
  </a-form>
</template>
<script>
import { defineComponent, reactive, ref } from 'vue'
import { DatePicker } from 'ant-design-vue'
import SpaceBetween from '@/components/SpaceBetween'
export default defineComponent({
  components: {
    SpaceBetween,
    DatePicker,
  },
  setup() {
    const config = {
      rules: [
        {
          type: 'string',
          required: true,
          message: 'Please select time!',
        },
      ],
    }
    const formState = reactive({
      userId: '123',
      userName: '哈哈哈哈',
      startTime: null,
      endTime: null,
      type: '1',
      days: '12',
      reason: '',
    })
    const date = ref(null)
    const onFinish = (values) => {
      console.log('Success:', values)
    }
    const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo)
    }
    return {
      date,
      config,
      formState,
      onFinish,
      onFinishFailed,
    }
  },
})
</script>
